<route>
{
  "layout": "default",
  "style": {
    "navigationBarTitleText": "产品",
    "navigationStyle": "custom"
  }
}
</route>

<template>
  <view class="page-container">
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    <view class="main-content">
      <view class="hero-section">
        <view class="hero-content">
          <text class="hero-label">策略中心</text>
          <text class="hero-title">全景数据 智能选股</text>
          <text class="hero-subtitle"> 热力图、一进二、龙虎榜等核心工具，助你把握市场脉搏 </text>
          <view class="hero-tags">
            <view class="hero-tag">分钟级更新</view>
            <view class="hero-tag">智能预警</view>
            <view class="hero-tag">席位追踪</view>
          </view>
        </view>
        <view class="hero-glass"></view>
        <view class="hero-glass small"></view>
      </view>

      <view class="section">
        <view class="section-header">
          <text class="section-title">产品矩阵</text>
          <text class="section-subtitle">围绕策略·数据·风控的多维组合</text>
        </view>
        <view class="product-grid">
          <view v-for="item in productList" :key="item.name" class="product-card">
            <view class="card-icon" :class="`icon-${item.icon}`">
              <text class="card-icon-text">{{ item.short }}</text>
            </view>
            <view class="card-text">
              <text class="card-name">{{ item.name }}</text>
              <text class="card-desc">{{ item.desc }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="section highlight">
        <view class="highlight-card">
          <view class="highlight-left">
            <text class="highlight-title">龙虎榜追踪</text>
            <text class="highlight-desc"> 全量席位画像，捕捉主力资金流向，支持自定义关注列表。 </text>
            <view class="highlight-tags">
              <view class="highlight-tag">重点席位</view>
              <view class="highlight-tag">历史战绩</view>
              <view class="highlight-tag">实时推送</view>
            </view>
          </view>
          <view class="highlight-right">
            <view class="highlight-circle outer">
              <view class="highlight-circle inner"></view>
            </view>
            <text class="highlight-value">98%</text>
            <text class="highlight-tip">近7日精准率</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useSystemStore } from '@/stores/system'

const systemStore = useSystemStore()
const { statusBarHeight } = storeToRefs(systemStore)

const productList = [
  { name: '热力图', desc: '盘面温度实时洞察', icon: 'heat', short: '热' },
  { name: '一进二', desc: '连板挖掘捕捉龙头', icon: 'chain', short: '进' },
  { name: '龙虎榜', desc: '席位动向一目了然', icon: 'rank', short: '龙' },
  { name: '龙虎榜追踪', desc: '重点席位持续跟踪', icon: 'trace', short: '踪' },
  { name: '趋势雷达', desc: '量价共振智能识别', icon: 'radar', short: '势' },
  { name: '异动预警', desc: '异常波动即时提醒', icon: 'alert', short: '警' },
  { name: '题材库', desc: '热点题材一键聚合', icon: 'topic', short: '材' },
  { name: '情绪指标', desc: '市场情绪精准刻画', icon: 'emotion', short: '绪' }
]
</script>

<style lang="scss">
@import './index.scss';
</style>
